<template>
	<view>
		<view class="balance-back"></view>
		<view class="balance-border">
			<navigator class="detailed" hover-class="none" :url="'/pages/center/balance-detail?type=' + type">
				<u-icon name="rmb-circle" color="#836D39" size="30"></u-icon>
				<view>明细</view>
			</navigator>
			<view class="balance-price">玉石</view>
			<view class="balance-total">{{info ? info.user_money : 0}}</view>
			<view class="withdrawal" @click="show = true">提现</view>
		</view>
	
		<!-- 规则 -->
		<view class="rules" :style="type == 1 ? 'margin-top: 30rpx' : ''">
			<view class="rules-flex">
				<view class="rules-border"></view>
				<view class="rules-title">提现说明</view>
			</view>
			<view v-for="(item,index) in configInfo" :key="index">{{item}}</view>
		</view>
		
		<!-- 提现弹窗 -->
		<u-popup mode="center" v-model="show" border-radius="16">
			<view class="tx">
				<view class="txHead">提现金额</view>
				<view class="txInput">
					<input class="inputClass" type="digit" v-model="value" placeholder="请输入提现金额" />
				</view>
				<button v-if="info.withdrawal_method==1" @click="tixians(1)" class="button">提现</button>
				<button v-else @click="tixians(2)" class="button">收款码提现</button>
				<view class="bottomTip">最低提现金额{{info.min_withdrawal}}元</view>
				<u-icon name="close" size="28" style="position: absolute;top:20rpx;right:20rpx;color:#000000"
					@click="show = false"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value: '',
				info: null,
				configInfo: '',
				type: 0
			};
		},
		onLoad(option) {
			this.type = option.type || 0
		},
		onShow() {
			this.getList()
			this.getConfig()
		},
		methods:{
			getConfig(){
				this.$net.req('/config/getBatchByKeys',{keys:['withdrawal_desc']}).then(res=>{
					if(res.code == 200){
						this.configInfo = res.data.withdrawal_desc
					}
				})
			},
			getList(){
				const { type } = this
				this.$net.req('/Withdraw/preview',{ type }).then(res=>{
					if(res.code == 200){
						this.info = res.data
					}
				})
			},
			tixians(type){
				if(this.value == ''){
					uni.showToast({
						title: '提现金额不能为空',
						icon: 'none'
					})
					return
				}
				if(Number(this.value) < Number(this.info.min_withdrawal)){
					uni.showToast({
						title: '金额不能小于最低提现金额',
						icon: 'none'
					})
					return
				}
				if (type == 1) {
					this.remoteWithdraw({amount: this.value, type: this.type})
				} else {
					this.$net.file(1).then(res => {
						if(res.code === 200) {
							let params = {
								amount: this.value,
								image: res.url,
								type: this.type
							}
							this.remoteWithdraw(params)
						} else {
							// this.$refs.uToast.show({
							// 	title: res.msg,
							// 	type: 'error'
							// })
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				}
			},
			remoteWithdraw(params){
				this.$net.req('/Withdraw/confirm', params).then(res=>{
					if(res.code == 200){
						this.value = ''
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.show = false
						setTimeout(()=>{
							this.getList()
						},1500)
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.balance-back{
		height: 384rpx;
		position: absolute;
		top: 0;
		z-index: -1;
		width: 100%;
		background: linear-gradient(180deg, #2F2E3B 0%, #F5F5F8 100%);
	}
	.balance-border{
		width: 690rpx;
		height: 526rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 32rpx auto 0;
		position: relative;
		
		.detailed{
			width: 118rpx;
			height: 48rpx;
			background: #F9EBD4;
			border-radius: 200rpx 0rpx 0rpx 200rpx;
			position: absolute;
			right: 0;
			top: 48rpx;
			display: flex;
			align-items: center;
			color: #836D39;
			font-size: 24rpx;
			justify-content: center;
			view{
				margin-left: 10rpx;
			}
		}
		
		.balance-price{
			text-align: center;
			font-size: 32rpx;
			padding-top: 64rpx;
			color: #999999;
		}
		.balance-total{
			margin-top: 48rpx;
			color: #333333;
			font-size: 96rpx;
			text-align: center;
		}
		.withdrawal{
			width: 598rpx;
			height: 96rpx;
			background: #DFC791;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			color: #2F2E3B;
			font-size: 32rpx;
			margin: 80rpx auto 0;
		}
	}
	
	.unpacking{
		width: 642rpx;
		height: 112rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		border: 3rpx solid #2F2E3B;
		margin: 24rpx auto;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #2F2E3B;
		font-size: 32rpx;
		
		.flex-left{
			display: flex;
			align-items: center;
			
			view{
				margin-left: 22rpx;
			}
		}
		.flex-right{
			display: flex;
			align-items: center;
			
		}
	}
	
	.rules{
		width: 690rpx;
		height: 386rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 36rpx 30rpx;
		margin: auto;
		margin-bottom: 50rpx;
		margin-top: 15px;
		view{
			color: #999999;
			font-size: 24rpx;
			margin-bottom: 10rpx;
		}
		
		.rules-flex{
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.rules-title{
				font-size: 36rpx !important;
				color: #333333 !important;
			}
						
			.rules-border{
				width: 8rpx;
				height: 36rpx;
				background: #2F2E3B;
				border-radius: 2rpx;
				margin-right: 10rpx;
			}
		}
	}
	
	.tx {
		width: 600rpx;
		min-height: 400rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 20rpx;
	
		.bottomTip {
			font-size: 24rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #999999;
			text-align: center;
			margin-top: 16rpx;
		}
	
		.txHead {
			font-size: 40rpx;
			font-family: SourceHanSansCN-Medium, SourceHanSansCN;
			font-weight: 500;
			color: #333333;
			text-align: center;
			line-height: 40rpx;
			height: 88rpx;
			padding-top: 48rpx;
		}
	
		.vipCenter {
			text-align: center;
			margin: 20rpx auto 48rpx;
			padding: 0 64rpx;
			color: #666666;
			font-size: 28rpx;
		}
	
		.txInput {
			padding: 0 56rpx;
			padding-top: 48rpx;
	
			.inputTip {
				font-size: 24rpx;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;
				color: #999999;
				margin-bottom: 10rpx;
	
				text {
					padding-left: 10rpx;
					color: #FEDD17;
				}
			}
	
			.inputClass {
				height: 96rpx;
				line-height: 96rpx;
				font-size: 28rpx;
				padding: 0 10rpx;
				border-radius: 8rpx;
				border: 2rpx solid #9B9B9B;
			}
		}
	
		button {
			margin-top: 74rpx;
			width: 360rpx;
			height: 84rpx;
			background: #DFC791;
			border-radius: 42rpx;
			line-height: 84rpx;
			font-size: 32rpx;
			color: #2F2E3B;
			letter-spacing: 4rpx;
		}
	}
</style>
